<template>
  <item-top :playlist="playlist" />
  <item-list :itemlist="itemlist" :subscribedCount="playlist.subscribedCount" />
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getMusicListDetail, getAllMusicList } from "@/api/home";
import ItemTop from "@/components/item/itemTop.vue";
import ItemList from "@/components/item/itemList.vue";
export default {
  components: {
    ItemTop,
    ItemList,
  },
  setup() {
    const route = useRoute();
    const state = reactive({
      playlist: {},
      itemlist: [],
    });
    onMounted(async () => {
      let id = route.query.id;
      let res = await getMusicListDetail(id);
      let res2 = await getAllMusicList(id);
      state.itemlist = res2.data.songs;
      state.playlist = res.data.playlist;
      sessionStorage.setItem("itemDetail", JSON.stringify(state));
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style></style>
